<!doctype html>
<%@ page import="com.mastercard.labs.Budget"%>
<html class="no-js" lang="en">
<head>
<meta name="layout" content="common">
<title>Manage Budget</title>
<style>
input[type="number"] {
	height: 30px;
}
</style>
<script>
$(document).ready(function(){
	type = $('#type').val();
	if(type == 'ALL'){
		$('#card_row').hide();
	}else{
		$('#card_row').show();
	}
	if($('#recursive').is(':checked')){
		$('#startdate_row').hide();
		$('#enddate_row').hide();
	}

	budgetType = $('#budgetType').val();
	if(budgetType == 'MONTHLY'){
		$('#billdate_row').show();
	}else{
		$('#billdate_row').hide();
	}
	if(budgetType == 'CUSTOMIZE'){
		$("form #recursive").attr('checked', false);
		$('#recursive_row').hide();
		$('#startdate_row').show();
		$('#enddate_row').show();
	}else{
		$('#recursive_row').show();
	}
	
	$('#recursive').click(function () {
		if(this.checked){
			$('#startdate_row').hide();
			$('#enddate_row').hide();
		}
		else{
			$('#startdate_row').show();
			$('#enddate_row').show();
		}
		//alert (this.checked);
	});
	$('#budgetType').change(function () {
		budgetType = $('#budgetType').val();
		if(budgetType == 'MONTHLY'){
			$('#billdate_row').show();
		}else{
			$('#billdate_row').hide();
		}
		if(budgetType == 'CUSTOMIZE'){
			$("form #recursive").attr('checked', false);
			$('#recursive_row').hide();
			$('#startdate_row').show();
			$('#enddate_row').show();
		}else{
			$('#recursive_row').show();
		}
	});

	$('#type').change(function () {
		selection = $('#type').val();
		if(selection == 'ALL'){
			$('#card_row').hide();
		}else{
			$('#card_row').show();
		}
	});
	
	$('#submit_button').click(function () {
		budgetType = $('#budgetType').val();
		if(budgetType!='MONTHLY'){
			$("#billDate option[value='1']").attr('selected', 'selected');
		}
		if(budgetType=='CUSTOMIZE'){
			$("form #recursive").attr('checked', false);
		}
		//type = $('#type').val();
		//if(type == 'ALL'){
			//$("#cardId option:selected").remove();
			//alert($('#cardId'));
		//}
		if($('#recursive').is(':checked')){
			$('#startDate').val() = '';
			$('#endDate').val() = '';
		}else{
			if (!$('#startDate').val()) {
			    alert ('start date is empty')
			    return false;
			}
			if (!$('#endDate').val()) {
			    alert ('end date is empty')
			    return false;
			}
			if ($('#startDate_value').val() >= $('#endDate_value').val()){
				alert ('invalid end date');
				return false;
			}
		}
	});
	
});
</script>
</head>
<body id="body">
	<h2>Manage Budget - <g:if test="${budgetInstance?.id}">Update</g:if><g:else>Create</g:else></h2>
	<hr />
	<g:if test="${flash.message}">
		<div class="alert alert-success">
			<img src="${resource(dir:'images', file:'icon_successful.png') }" />&nbsp;&nbsp;${flash.message}
		</div>
	</g:if>
	<div class="row>">
		<g:form method="POST" action="show">
			<g:hiddenField name="id" value="${budgetInstance?.id}"/>
			<g:hiddenField name="budget" value="true"/>
			<table class="table table-striped">
			  <thead>
        		<tr>
            	  <th>Budget Detail</th>
        		</tr>
    	  	  </thead>
    		  <tbody>
				<tr>
					<td width="20%">Type&nbsp;<font color="red">*</font></td>
					<td>
						<g:select from="${com.mastercard.labs.Budget.Type.values()}" name="type" optionKey="key" value="${budgetInstance?.type?.key}"/> 
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="type" /></span>
					</td>
				</tr>

				<tr id='card_row'>
					<td width="20%">Card&nbsp;<font color="red">*</font></td>
					<td>
						<g:select name='cardId' from='${cards}' optionKey="id" optionValue="maskNumber" value="${budgetInstance?.card?.id}"> </g:select>
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="cards" /></span>
					</td>
				</tr>
				<tr>
					<td width="20%">Budget Type&nbsp;<font color="red">*</font></td>
					<td>
						<g:select from="${com.mastercard.labs.Budget.BudgetType.values()}" name="budgetType" optionKey="key" value="${budgetInstance?.budgetType?.key}"/> 
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="budgetType" /></span>
					</td>
				</tr>
				<tr id='billdate_row'>
					<td width="20%">Bill Date&nbsp;<font color="red">*</font></td>
					<td>
						<g:select name="billDate" from="${1..31}" value="${fieldValue(bean: budgetInstance, field: 'billDate')}"/>
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="billDate" /></span>
					</td>
				</tr>
				<tr id='recursive_row'>
					<td width="20%">Recurrence</td>
					<td>
						<g:checkBox name="recursive" value="${budgetInstance?.recursive}"/>
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="recursive" /></span>
					</td>
				</tr>
				<tr id='startdate_row'>
					<td width="20%">Start Date&nbsp;<font color="red">*</font></td>
					<td>
						<calendar:datePicker name="startDate" defaultValue="${budgetInstance?.startDate}"/>
						<%--<g:datePicker name="startDate" precision="day" value="${budgetInstan?.startDate}"/>--%>
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="startDate" /></span>
					</td>
				</tr>
				<tr id='enddate_row'>
					<td width="20%">End Date&nbsp;<font color="red">*</font></td>
					<td>
						<calendar:datePicker name="endDate" defaultValue="${budgetInstance?.endDate}"/>
						<%--<g:datePicker name="endDate" precision="day" value="${budgetInstance?.endDate}"/>--%>
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="endDate" /></span>
					</td>				
				</tr>
				<tr>
					<td width="20%">Amount&nbsp;<font color="red">*</font></td>
					<td>
						<g:field type="number" name="amount" maxlength="8" value="${fieldValue(bean:budgetInstance,field:'amount')}"/>
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="amount" /></span>
					</td>
				</tr>
				<tr>
					<td width="20%">SMS Notification&nbsp;</td>
					<td>
						<g:checkBox name="smsNotification" value="${budgetInstance?.smsNotification}"/>
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="smsNotification" /></span>
					</td>
				</tr>
				<tr>
					<td width="20%">Email Notification&nbsp;</td>
					<td>
						<g:checkBox name="emailNotification" value="${budgetInstance?.emailNotification}"/>
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="emailNotification" /></span>
					</td>
				</tr>
				<tr>
					<td width="20%">Remarks</td>
					<td>
						<g:textField name="remarks" maxlength="50" value="${fieldValue(bean:budgetInstance,field:'remarks')}"/>
						<span class="errorMsg"><br/><g:fieldError bean="${budgetInstance}" field="remarks" /></span>
					</td>
				</tr>
			  </tbody>
			</table>
			<br/>
			<fieldset class="buttons">
					<g:actionSubmit class="btn btn-primary" action="saveBudget" id="submit_button" value="Submit" />
					<g:actionSubmit class="btn" action="show" value="Cancel" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />
			</fieldset>
		</g:form>
	</div>
</body>
</html>
